<template>
  <div id="setBooks">
    <div class="content-title">
      <span class="line-y"></span>
      <span class="left">全网必读</span>
      <span class="right" @click="back">返回</span>
    </div>
    <div class="news">
      <ul class="breviary">
        <li
          v-for="(item, index) in listData"
          :key="index"
          @click="link(item.share_url, item.title)"
        >
          <span class="red">[{{ item.channel_name }}]</span>
          <span class="text">{{ item.title }}</span>
          <span class="time">{{ item.release_date | timeFormat }}</span>
        </li>
      </ul>
    </div>
    <p class="loadMore" @click="loadMore" v-show="loadShow">
      加载更多
      <i class="icon"></i>
    </p>
  </div>
</template>
<script>
import { timeFormat } from "../script/fn.js";
import { Toast } from "vant";
import { getBooks } from "../script/api";
export default {
  data() {
    return {
      listData: [],
      loadShow: true,
      send: {
        limit: 25,
      },
    };
  },
  mounted() {
    this.dataList(this.send);
  },
  filters: {
    timeFormat(val) {
      return timeFormat(val);
    },
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    link(url, title) {
      const t = Date.now();
      window.prompt(
        "",
        `up://["open.web",${t},{"url":"${url}?${Date.now()}&from=client&inside=1","title":"${title}","popuptype":1}]`
      );
    },

    async dataList(params) {
      const data = await getBooks(params);
      this.listData = data;
      if (this.listData.length <= 0) {
        this.loadShow = false;
      }
    },
    async loadMore() {
      if (!navigator.onLine) return Toast("网络连接失败，请检查网络设置");
      const last = this.listData.length - 1;
      const send = {
        page: last,
        limit: (this.send.limit += 10),
      };
      this.dataList(send);
    },
  },
};
</script>
<style lang="scss" scoped>
#setBooks {
  margin: 0 auto;
  width: 1200px;
  height: 889px;
  background: #090910;
}
.content-title {
  box-sizing: border-box;
  height: 30px;
  background: #27282e;
  border: 1px solid rgba(67, 68, 72, 1);
  font-size: 15px;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  line-height: 30px;
}
.line-y {
  float: left;
  margin-left: -1px;
  width: 2px;
  height: 28px;
  background: rgba(255, 138, 27, 1);
}
.content-title .left {
  margin-left: 13px;
  cursor: pointer;
}
.content-title .right {
  float: right;
  margin-right: 15px;
  color: rgba(188, 191, 196, 1);
  cursor: pointer;
}
.news {
  padding-top: 20px;
  box-sizing: border-box;
}
.news .breviary li {
  height: 15px;
  margin-bottom: 16px;
  cursor: pointer;
}

.news .breviary li .red {
  // width:41px;
  height: 15px;
  float: left;
  margin-right: 6px;
  font-size: 15px;
  display: inline-block;
  font-weight: 400;
  color: rgba(234, 40, 39, 1);
  line-height: 15px;
}
.news .breviary li .text {
  width: 683px;
  height: 15px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(188, 191, 196, 1);
  line-height: 15px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.news .breviary li .text:hover {
  text-decoration: underline;
}
.news .breviary li .time {
  float: right;
  height: 15px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(188, 191, 196, 1);
  line-height: 15px;
}
.loadMore {
  cursor: pointer;
  margin-top: 12px;
  margin-bottom: 20px;
  text-align: center;
  color: #666666;
  font-size: 16px;
  font-weight: 400;
  position: absolute;
  left: 0;
  right: 0;
  .icon {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-left: 1px solid #666666;
    border-bottom: 1px solid #666666;
    position: relative;
    margin-left: 5px;
    transition: all 0.3s;
    top: -4px;
    transform: rotate(-45deg);
  }
}
</style>
